<template>
  <div class="page-content">


    <!-- 查询表单区域 -->
    <div class="form-section">
      <el-form label-width="90px">
        <el-row :gutter="20">
          <!-- 用户名输入框 -->
          <el-col :xs="24" :sm="12" :lg="3">
            <el-input placeholder="用户名" v-model="searchParameter.user_name" />
          </el-col>

          <!-- 开始日期 -->
          <el-col :xs="24" :sm="12" :lg="5">
            <el-date-picker
              v-model="searchParameter.start"
              type="date"
              placeholder="开始日期"
            />
          </el-col>

          <!-- 结束日期 -->
          <el-col :xs="24" :sm="12" :lg="5">
            <el-date-picker
              v-model="searchParameter.end"
              type="date"
              placeholder="结束日期"
            />
          </el-col>

          <!-- 搜索 & 新增按钮 -->
          <el-col :xs="24" :sm="12" :lg="3">
            <el-button type="primary" @click="search" style="width: 100%">搜索</el-button>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :lg="9" style="text-align: left; margin-top: 20px;">
            <router-link to="/imgroup/chaoqunAdd">
              <el-button type="success">新增炒群计划</el-button>
            </router-link>
            <router-link to="/imgroup/robot">
              <el-button type="success">管理机器人</el-button>
            </router-link>
            <router-link to="/imgroup/jiaoben">
              <el-button type="success">管理脚本</el-button>
            </router-link>
          </el-col>
        </el-row>

      </el-form>
    </div>

    <!-- 数据表格 -->
    <tao-table :data="dataList" :showPage="false" style="margin-top: 15px">
  <!-- 序号列（短一些） -->
  <el-table-column label="序号" prop="id" width="60" />

  <!-- 群ID、名称、备注（长一些） -->
  <el-table-column label="群ID" prop="sdk_groupid" min-width="180" />
  <el-table-column label="名称" prop="group_name" min-width="180" />
  <el-table-column label="备注" prop="remark_name" min-width="180" />

  <!-- 其他列正常 -->
  <el-table-column label="创建时间" prop="create_at" />
  <el-table-column label="启动时间" prop="chao_run_start_time" />
  <el-table-column label="真实用户" prop="true_use_names" />

  <!-- 操作列 -->
  <el-table-column fixed="right" label="操作" width="150">
    <template slot-scope="scope">
      <el-button type="text" icon="el-icon-edit" @click="">
        编辑
      </el-button>
      <el-button
        type="text"
        icon="el-icon-delete"
        style="color: #FA6962"
        @click=""
      >
        删除
      </el-button>
    </template>
  </el-table-column>
</tao-table>


  </div>
</template>

<script>
import { getGroupId } from "@/utils/auth";
import {
  getImChaoQunApi,
} from "@/api/ImChat";

export default {
  data() {
    return {
      // 日期快捷选项
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            },
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            },
          },
          {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            },
          },
        ],
      },

      // 表格数据及分页
      dataList: [
      //   { 
      //   id: '1',
      //   sdk_groupid: 'TGC84824234',
      //   group_name: '股票综合19群',
      //   remark_name: '2号小群',
      //   create_at: '2025-05-22',
      //   chao_run_start_time: '2025-05-23',
      //   true_use_names: '无敌小强，张三丰...',
      // }
      ], // 示例数据
      allpage: 1,
      showItem: 5,
      current: 1,

      // 提示信息
      alertMsg: '提示信息',

      // 查询参数
      searchParameter: {
        user_name: undefined,
        start: undefined,
        end: undefined,
      },
    };
  },

  mounted() {
    // 页面加载时请求数据
    this.getDataList();
  },

  methods: {
    // 获取数据列表
    getDataList() {
      const data = { groupid: getGroupId() };
      getImChaoQunApi(data).then(res => {
        if (res.code == 200) {
          this.dataList = res.data.list;
        }
      });
    },

    // 执行搜索
    search() {
      this.getDataList();
    },
  },
};
</script>

<style lang="scss" scoped>
.page-content {
  width: 100%;
  height: 100%;

  .header {
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;

    h3 {
      font-size: 17px;
      font-weight: 500;
    }
  }

  /deep/ .el-form {
    .el-form-item {
      max-width: 700px;
    }
  }

  .form-section {
    margin-bottom: 20px;
  }
}
</style>
